---
title: "Z-Index"
# description: "Utilities for controlling the stack order of an element."
description: "用于控制元素的堆栈顺序的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/zIndex'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 使用方法

<!-- Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `z-{index}` utilities. -->
在 Tailwind 中使用 `z-{index}` 功能类控制一个元素的堆栈顺序（或三维定位），使得与其显示顺序无关。

```html fuchsia
<template preview class="p-4">
  <div class="flex justify-center relative h-28 text-center transform translate-x-12">
    <div class="z-40 relative w-20 h-20 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
    <div class="z-30 relative w-20 h-20 -left-6 top-2 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
    <div class="z-20 relative w-20 h-20 -left-12 top-4 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
    <div class="z-10 relative w-20 h-20 -left-18 top-6 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
    <div class="z-0 relative w-20 h-20 -left-24 top-8 bg-fuchsia-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
  </div>
</template>

<div class="**z-40** ...">5</div>
<div class="**z-30** ...">4</div>
<div class="**z-20** ...">3</div>
<div class="**z-10** ...">2</div>
<div class="**z-0** ...">1</div>
```

## 响应式

<!-- To control the z-index of an element at a specific breakpoint, add a `{screen}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的 z-index，可在任何现有的 z-index 功能类前添加 `{screen}:` 前缀。例如，使用 `md:z-50` 来只在中等尺寸及以上的屏幕应用 `z-50` 功能类。

```html
<div class="z-0 **md:z-50** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
了解更多关于 Tailwind 响应式设计功能的信息，查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Z-Index 范围

<!-- By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `theme.zIndex` section of your Tailwind config. -->
默认情况下，Tailwind 提供了六个数值的 `z-index` 功能类和一个 `auto` 功能类。您可以通过编辑您的 Tailwind 配置中的 `theme.zIndex` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      zIndex: {
        '0': 0,
-       '10': 10,
-       '20': 20,
-       '30': 30,
-       '40': 40,
-       '50': 50,
+       '25': 25,
+       '50': 50,
+       '75': 75,
+       '100': 100,
        'auto': 'auto',
      }
    }
  }
```

### 负值

<!-- If you'd like to add any negative z-index classes that take the same form as Tailwind's [negative margin](/docs/margin#negative-margins) classes, prefix the keys in your config file with a dash: -->
如果您想添加任何负的 z-index 类，在配置文件中的键前加上破折号，其形式与 Tailwind 的 [负外边距](/docs/margin#negative-margins) 类相同。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        zIndex: {
+         '-10': '-10',
        }
      }
    }
  }
```

<!-- Tailwind is smart enough to generate classes like `-z-10` when it sees the leading dash, not `z--10` like you might expect. -->
尾风很聪明，当它看到前面的破折号时，会生成像 `-z-10` 这样的类，而不是像您可能期望的 `z--10`。

### 变体

<Variants plugin="zIndex" name="z-index" />

### 禁用

<Disabling plugin="zIndex" name="z-index" />
